<template>
    <div class="dialogContainer">
        <div class="dialogMask" @click.stop="dialogCancelFun(isClose)"></div>
        <div class="dialogWrapper" ref="DialogWrapper" :style="{width: dialogWrapperWidth + 'px'}">
            <div v-if="closeImgShow" class="closeBtn">
                <img src="../../assets/img/middle.png" @click="dialogCancelFun(isClose)" alt="关闭" title="关闭">
            </div>
            <div v-if="dialogHeaderShow" class="dialogHeader">
                <span class="title">{{dialogTitle}}</span>
            </div>
            <div v-else class="dialogHeaderPlaceholder"></div>
            <div v-if="dialogBodyShow" class="dialogBody">
                <slot></slot>
            </div>
            <div v-if="dialogFooterShow" class="dialogFooter" :style="{paddingLeft: footerPaddingLeftAndRight + 'px', paddingRight: footerPaddingLeftAndRight + 'px'}">
                <div v-if="confirmBtnShow" class="confirmBtnBox" :style="{justifyContent:cancleBtnVisible ? 'space-between' : 'center'}">
                    <slot name="footer">
                        <div  v-if="cancleBtnVisible" class="dialogButton cancelBtn" @click.stop="dialogCancelFun" :style="cancelBtnStyle">{{ cancelBtnText }}</div>
                        <div class="dialogButton  confirmBtn" :id="confirmBtnId" @click.stop="dialogConfirmFun" :style="confirmBtnStyle">{{ confirmBtnText }}</div>
                    </slot>
                </div>
                <div v-if="alertBtnShow" class="alertBtnBox">
                    <slot name="footer">
                        <div class="dialogButton  confirmBtn" :id="confirmBtnId" @click.stop="dialogConfirmFun" :style="cancelBtnStyle">{{ alertBtnText }}</div>
                    </slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "Dialog",
  props: {
    dialogTitle: {
        type: String,
        default: '弹窗标题',
        // default: ''
    },
    cancleBtnVisible: {
        type: Boolean,
        default: true,
    },
    // 弹窗头部显示
    dialogHeaderShow: {
        type: Boolean,
        default: false,
    },
    dialogFooterShow: {
        type: Boolean,
        default: true,
    },
    dialogBodyShow: {
        type: Boolean,
        default: true,
    },
    cancelBtnText: {
        type: String,
        default: '取消'
    },
    cancelBtnStyle: {
        type: String,
        default: ''
    },
    confirmBtnText: {
        type: String,
        default: '确认'
    },
    confirmBtnStyle: {
        type: String,
        default: ''
    },
    dialogWrapperWidth: {
        type: Number,
    },
    footerPaddingLeftAndRight: {
        type: Number,
    },
    confirmBtnId: {},
    cancelBtnVisivle: {
        type: Boolean,
        default: true,
    },
    alertBtnText: {
        type: String,
        default: '我知道了'
    },
    confirmBtnShow: {
        type: Boolean,
        default: true
    },
    alertBtnShow: {
        type: Boolean,
        default: false
    },
    closeImgShow: {
        type: Boolean,
        default: true
    }
  },
  data() {
      return {
          isClose: true,
      }
  },
  mounted() {
      document.body.appendChild(this.$el);
  },
  methods: {
      dialogCancelFun(isClose) {
          this.$emit('dialogCancelFun', isClose)
      },
      dialogConfirmFun(){
          this.$emit('dialogConfirmFun')
      }
  },
  destroyed() {
      if (this.$el && this.$el.parentNode) {
          this.$el.parentNode.removeChild(this.$el);
      }
  },
}
</script>

<style scoped lang="less">
.dialogContainer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9999;
    .dialogMask {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.3);
    }
    .dialogWrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 510px;
        border: 1px solid #E1E1E1;
        transform: translate(-50%, -50%);
        background: #FFF;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        .closeBtn {
            position: absolute;
            top: 0px;
            right: 0px;
            padding: 10px;
            cursor: pointer;
        }

        .dialogHeader {
            width: 100%;
            text-align: center;
            font-size: 28px;
            font-weight: 600;
            color: #333333;
            padding-top: 20px;
        }
        .dialogHeaderPlaceholder {
            height: 32px;
        }
        .dialogBody {
            text-align: center;
            padding:30px 19px 30px;

            // 弹窗组件body中的文字样式
            .dialogBodyText {
                width: 100%;
                text-align: center;
            }

            .dialogChiefText {
                font-size: 21px;
                font-family: PingFangSC-Semibold, PingFang SC, serif;
                font-weight: 600;
                color: #333333;
            }

            .dialogSecondText {
                font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC, serif;
                font-weight: 400;
                color: #666666;
            }
        }
        .dialogFooter {
            width: 100%;
            height: 60px;

            .confirmBtnBox {
                display: flex;
                justify-content: space-between;
                padding: 0 30px 20px;
            }

            .alertBtnBox {
                display: flex;
                justify-content: center;
            }

            .dialogButton {
                width: 200px;
                height: 40px;
                line-height: 40px;
                border-radius: 4px;
                font-size: 21px;
                //font-weight: 600;
                text-align: center;
                cursor: pointer;
            }

            .cancelBtn {
                background: #FFFFFF;
                border: 1px solid #92959B;
                color: #92959B;
            }

            .confirmBtn {
                background: #1989FA;
                color: #FFFFFF;
            }
        }
    }
}


@media all and(max-width: 500px) {
    .dialogContainer {
        zoom: 0.5;
    }
}

@media all and (min-width: 500px) and (max-width: 800px) {
    .dialogContainer {
        zoom: 0.6;
    }
}

@media all and (min-width: 800px) and (max-width: 1200px) {
    .dialogContainer {
        zoom: 0.7;
    }
}

@media all and (min-width: 1200px) and (max-width: 1500px) {
    .dialogContainer {
        zoom: 0.8;
    }
}

@media all and (min-width: 1500px) and (max-width: 1800px) {
    .dialogContainer {
        zoom: 0.9;
    }
}
@media all and (min-width: 1800px){
    .dialogContainer {
        zoom: 1;
    }
}

</style>
